<template>
  <div class="orderDetail">
    <myHead title="订单详情" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <div class="detail">
      <div class="nameDetail">取货号</div>
      <div class="orderNum">{{info.id}}</div>
    </div>
    <div class="detail">
      <div class="nameDetail">订单状态：</div>
      <div class="contentDetail red" v-if="info.status == 1">待接单</div>
      <div class="contentDetail red" v-if="info.status == 2">待配送</div>
      <div class="contentDetail red" v-if="info.status == 3">待确认</div>
      <div class="contentDetail red" v-if="info.status == 5">已完成</div>
      <div class="contentDetail red" v-if="info.status == 6">申请退款</div>
    </div>
    <div class="orderInfo">
      <div class="detail">
        <div class="nameDetail">下单时间：</div>
        <div class="contentDetail">{{info.order_time | formatDate}}</div>
      </div>
      <div class="detail">
        <div class="nameDetail">订单编号：</div>
        <div class="contentDetail">{{info.orderid}}</div>
      </div>
    </div>
    <div class="reason">
      <div class="detail">
        <div class="nameDetail">退款原因：</div>
        <div class="contentDetail">多买‘买错、不想要</div>
      </div>
      <div class="reason_content">尽快送达，不要迟到哦！尽快送达，不要迟到哦 尽快送达，不要迟到哦!</div>
    </div>
    <div class="detail">
      <div class="nameDetail">配送方式：</div>
      <div class="contentDetail" v-if="info.type == 0">外卖配送</div>
      <div class="contentDetail" v-else>到店自取</div>
    </div>
    <div class="goodsInfo">
      <div class="nameDetail">商品(1)</div>
      <div class="goodsList">
        <div class="goodImg">
          <img :src="$store.state.imgurlApi+info.image" alt="">
        </div>
        <div class="goods">
          <div class="goodsName">{{info.title}}</div>
          <div class="goodsPrice">￥{{info.price}}</div>
        </div>
        <div class="goodsNum">x2</div>
      </div>
    </div>
    <div class="userInfo">
      <div class="icon">
        <img src="../../../static/img/business/local.png" alt="" />
      </div>
      <div class="userInfoDetail">
        <div class="name">
          <span>{{info.name}}</span>
          <span>{{info.phone}}</span>
        </div>
        <div class="address">{{info.dispatching}}{{info.particular}}</div>
      </div>
      <div class="tel">
        <img src="../../../static/img/business/tel.png" alt="" />
      </div>
    </div>
    <div class="remarks">
      <div class="nameDetail">订单备注</div>
      <div class="contentDetail">001</div>
    </div>
    <div class="price">
      <div class="priceList">
        <div class="priceLeft">商品总计</div>
        <div class="priceRight">￥{{info.total_price}}</div>
      </div>
      <div class="priceList">
        <div class="priceLeft">包装费</div>
        <div class="priceRight">￥{{info.pack}}</div>
      </div>
      <div class="priceList">
        <div class="priceLeft">配送费</div>
        <div class="priceRight">￥{{info.shipping_fee}}</div>
      </div>
<!--      <div class="priceList">-->
<!--        <div class="priceLeft">优惠券</div>-->
<!--        <div class="priceRight"> - ￥79.9</div>-->
<!--      </div>-->
<!--      <div class="priceList">-->
<!--        <div class="priceLeft">退款金额</div>-->
<!--        <div class="priceRight totalPrice">￥79.9</div>-->
<!--      </div>-->
    </div>

    <div class="btn" v-if="info.status == 5">
      <div class="sure">已完成</div>
    </div>
    <div class="btn" v-if="info.status == 7">
      <div class="sure">已退款</div>
    </div>
  </div>
</template>

<script>
    import myHead from "../../components/BusinessComponents/lib/myHead";
    import {formatDate} from "../../methods/time";

    export default {
        name: "orderDetail",
        components: {
          myHead
        },
      filters: {
        formatDate(time) {
          time = time * 1000;
          let date = new Date(time);
          return formatDate(date, 'yyyy年MM月dd日 hh:mm')
        },
      },
      data() {
        return {
          info:false,
          tel:17391751754
        }
      },
      created() {
        this.$myAxios('index/Order/manystore_details', 'post', {
          order_id:this.$route.query.id,
        }).then(res => {
          console.log(res.data);
          if(res.data.state == 1){
            this.info = res.data.shopro_goods
          }else{
            this.$myNotice('网络中断，刷新重试',1500)
          }
        });
      },
    }
</script>

<style scoped>
  .orderDetail{
    background: #F5F5F5;
    min-height: 6rem;
    padding-top: .51rem;
  }
  .detail{
    margin: .1rem 0;
    background: #ffffff;
    display: flex;
    padding: .1rem .15rem;
    align-items: center;
    font-size: .14rem;
  }
  .nameDetail{
    margin-right: .12rem;
  }
  .contentDetail{

  }
  .orderNum{
    width:.45rem;
    height: .23rem;
    background:linear-gradient(81deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    border-radius:.02rem;
    text-align: center;
    font-size: .17rem;
    color: #ffffff;
  }
  .orderInfo{
    padding: .07rem 0;
    background: #ffffff;
  }
  .orderInfo .detail{
    margin: 0;
    padding: .03rem .15rem;
  }
  .reason{
    background: #ffffff;
    padding-bottom: .1rem;
  }
  .reason_content{
    background: #F4F4F4;
    margin: -.1rem .1rem 0;
    padding: .1rem;
  }
  .goodsInfo{
    background: #ffffff;
    padding: .12rem;
  }
  .goodsInfo .nameDetail{
    font-size: .14rem;
  }
  .goodsList{
    display: flex;
    justify-content: space-between;
    margin: .14rem 0;
  }
  .goodImg{
    width: .7rem;
    height: .7rem;
  }
  .goods{
    flex-grow: 1;
    margin-left: .2rem;
    position: relative;
    font-size: .14rem;
  }
  .goodsPrice{
    font-size: .15rem;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .goodsNum{
    padding-top: .5rem;
    font-size: .15rem;
    font-weight: bold;
  }
  .userInfo{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.14rem .1rem;
    background: #ffffff;
    margin: .1rem 0;
  }
  .userInfoDetail{
    flex-grow: 1;
    margin-left: .1rem;
  }
  .name{
    font-size: .15rem;
    color: #333333;
  }
  .name span{
    margin-right: .14rem;
  }
  .address{
    font-size: .14rem;
    color: #666666;
    margin-top: .04rem;
  }
  .icon{
    width: .18rem;
  }
  .tel{
    width: .28rem;
    margin-right: .12rem;
  }
  .remarks{
    padding: 0.14rem;
    background: #ffffff;
    margin: .1rem 0;
  }
  .remarks .nameDetail{
    font-size: .14rem;
  }
  .remarks .contentDetail{
    font-size: .13rem;
    color: #666666;
    margin-top: .06rem;
  }
  .price{
    background: #ffffff;
  }
  .priceList{
    display: flex;
    justify-content: space-between;
    padding: .14rem;
    font-size: .14rem;
    border-bottom: 1px solid #EBEBEB;
  }
  .totalPrice{
    color: #FB4448;
    font-size: .18rem;
  }
  .btn{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: .12rem 0;
  }
  .refuse{
    border: 1px solid #FB5256;
    color: #FB5256;
    font-size: .15rem;
    width: .83rem;
    height: .34rem;
    line-height: .36rem;
    border-radius: .18rem;
    text-align: center;
    margin-right: .12rem;
  }
  .sure{
    background: linear-gradient(0deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    width: 1.15rem;
    height: .36rem;
    line-height: .36rem;
    border-radius: .18rem;
    color: #ffffff;
    text-align: center;
    margin-right: .1rem;
    font-size: .15rem;
  }.btn{
     display: flex;
     justify-content: flex-end;
     align-items: center;
     padding: .12rem 0;
   }
  .refuse{
    border: 1px solid #FB5256;
    color: #FB5256;
    font-size: .15rem;
    width: .83rem;
    height: .34rem;
    line-height: .36rem;
    border-radius: .18rem;
    text-align: center;
    margin-right: .12rem;
  }
  .sure{
    background: linear-gradient(0deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    width: 1.15rem;
    height: .36rem;
    line-height: .36rem;
    border-radius: .18rem;
    color: #ffffff;
    text-align: center;
    margin-right: .1rem;
    font-size: .15rem;
  }

  .red{
    color: #FB4448;
  }
</style>
